<template>
  <div id="inventoryBill">
    <x-header :left-options="{backText: ''}">活动中心
    </x-header>
    <div class="headBill">
      <h2>累计盈余</h2>
      <h1>{{surplustotal}}</h1>
      <div class="headBillInfo">
        <ul>
          <li>
            <span>总库存</span>
            <p>{{synumber}}</p>
          </li>
          <li>
            <span>总投入</span>
            <p>{{symoney}}</p>
          </li>
          <li>
            <span>待解封货单</span>
            <p>{{undeblocked}}</p>
          </li>
          <li>
            <span>余额</span>
            <p>{{userCKCount}}</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="billCon">
      <ul>
        <li @click="jumpTo({path: '/history', query: {id: $route.query.id}})">
          <img src="../../assets/img/my/list_icon@2x.png" alt="">
          <p>进出列表</p>
        </li>
        <li @click="jumpTo({path: '/activityimmediately', query: {userid: user.user_id, goodsid: $route.query.id}})">
          <img src="../../assets/img/my/bill_icon@2x.png" alt="">
          <p>提现</p>
        </li>
        <li @click="jumpTo({path: '/balance', query: {id: $route.query.id}})">
          <img src="../../assets/img/my/bring_icon@2x.png" alt="">
          <p>余额账单</p>
        </li>
        <li @click="$toastText('功能升级中。。。')">
        <!-- <li @click="jumpTo({path: '/guarantee', query: {userid: user.user_id,goodsid: $route.query.id}})"> -->
          <img src="../../assets/img/my/vip_icon@2x.png" alt="">
          <p>本金保障</p>
        </li>
        <!-- <li @click="jumpTo({path: '/entrust', query: {id: $route.query.id}})"> -->
        <li @click="$toastText('功能升级中。。。')">
          <img src="../../assets/img/my/entrust_icon@2x.png" alt="">
          <p>全程委托</p>
        </li>
        <li @click="$toastText('功能升级中。。。')">
<!--        <li @click="jumpTo('/stockTransfer')">-->
          <img src="../../assets/img/my/shift_icon@2x.png" alt="">
          <p>库存转移</p>
        </li>
        <li @click="jumpTo({path: '/manifest', query: {id: $route.query.id, userid: user.user_id}})">
          <img src="../../assets/img/my/lock_icon@2x.png" alt="">
          <p>解封货单</p>
        </li>
        <li @click="$toastText('功能升级中。。。')">
          <img src="../../assets/img/my/pick_goods_icon@2x.png" alt="">
          <p>提货</p>
        </li>
      </ul>
    </div>
    <div class="btnBox">
      <button class="defBtn" @click="jumpTo({path: '/p2pgoodstrend', query: {id: $route.query.id}})">进出货交易</button>
    </div>
  </div>
</template>
<script>
import { getP2PUserPositions } from '@api'
import { mapMutations, mapState } from 'vuex'
import { SET_LOADING } from '@store/type'
export default {
  data () {
    return {
      userCKCount: 0, // 会员余额
      synumber: 0, // 总库存
      symoney: 0, // 总成本
      surplustotal: 0, // 累积盈余
      undeblocked: 0
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    // 查询用户持仓信息
    async loaduserslevel () {
      let form = new FormData()
      form.append('position_goods_id', this.$route.query.id)
      form.append('position_user_id', this.user.user_id)
      let res = await getP2PUserPositions(form)
      if (res && res.data !== null && res.code === 200) {
        if (res.data.position_balance) {
          this.userCKCount = res.data.position_balance
        } else {
          this.userCKCount = 0
        }
        if (res.data.position_goods_num) {
          this.synumber = res.data.position_goods_num
        } else {
          this.synumber = 0
        }
        if (res.data.total_cost) {
          this.symoney = res.data.total_cost
        } else {
          this.symoney = 0
        }
        if (res.data.total_surplus) {
          this.surplustotal = res.data.total_surplus
        } else {
          this.surplustotal = 0
        }
        this.undeblocked = res.data.Undeblocked - res.data.Unblock
      }
    }
  },
  created () {
    this.loaduserslevel()
  },
  activated () {
    this.loaduserslevel()
  }
}
</script>

<style lang="scss">
  #p2pbilling_mescroll {
    .mescroll-empty {
      padding-top: 30%;
    }
  }
</style>

<style lang="scss" scoped>
@import '../../assets/css/pub';

#inventoryBill{
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  /deep/ .vux-header {
    background: rgba(0,0,0,0);
    position: absolute;
    width: 100%;
    .vux-header-title{
      color: #fff;
    }
    .vux-header-left .left-arrow:before {
      border-width: .0125rem 0 0 .0125rem;
      border-color: #fff;
    }
  }
  .headBill{
    width: 100%;
    height: 7.7rem;
    background: url("../../assets/img/my/purple_back@2x.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    h2{
      font-size: .5rem;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: rgba(255,255,255,1);
      text-align: center;
      padding-top: 2.5rem;
    }
    h1{
      font-size: 1.25rem;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: rgba(255,255,255,1);
      text-align: center;
      padding-top: .5rem;
    }
    .headBillInfo{
      padding: 0 .7rem;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      ul{
        width: 100%;
        background: rgba(255,255,255,1);
        box-shadow: 0 0 .625rem 0 rgba(26,25,26,0.1);
        border-radius: .125rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        li{
          width: 25%;
          text-align: center;
          padding: .25rem 0;
          span{
            font-size: .34rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: rgba(102,102,102,1);
          }
          p{
            font-size: .3rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: rgba(0,0,0,1);
            padding-top: .25rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .billCon{
    width: 100%;
    margin-top: .5rem;
    padding: 0 .7rem 2rem;
    ul{
      /*width: 8.5rem;*/
      background: rgba(255,255,255,1);
      box-shadow: 0 0 .625rem 0 rgba(26,25,26,0.1);
      border-radius: .125rem;
      /*margin: auto;*/
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      padding: .25rem;
      li{
        width: 33.333%;
        text-align: center;
        padding: .25rem;
        img{
          width: .825rem;
          height: .825rem;
          padding: .25rem;
        }
        p{
          font-size: .3rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: rgba(1,0,0,1);
          padding: .25rem 0;
        }
      }
    }
  }
  .btnBox{
    width: 100%;
    height: 1.65rem;
    line-height: 1.65rem;
    background: #f7f7f7;
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 0 .7rem;
    .defBtn{
      width: 100%;
      height: 1.225rem;
      background: rgba(255, 187, 18, 1);
      border: none;
      border-radius: .1875rem;
      font-size: .375rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: rgba(255,255,255,1);
      line-height: .4375rem;
      text-align: center;
    }
  }
}
</style>
